<div class="data-table-container">
    <table class="data-table"
           ng-class="{ 'data-table--no-border': !lxDataTable.border,
                       'data-table--thumbnail': lxDataTable.thumbnail }">
        <thead>
            <tr ng-class="{ 'data-table__selectable-row': lxDataTable.selectable,
                            'data-table__selectable-row--is-selected': lxDataTable.selectable && lxDataTable.allRowsSelected }">
                <th ng-if="lxDataTable.thumbnail"></th>
                <th ng-click="lxDataTable.toggleAllSelected()"
                    ng-if="lxDataTable.selectable"></th>
                <th ng-class=" { 'data-table__sortable-cell': th.sortable,
                                 'data-table__sortable-cell--asc': th.sortable && th.sort === 'asc',
                                 'data-table__sortable-cell--desc': th.sortable && th.sort === 'desc' }"
                    ng-click="lxDataTable.sort(th)"
                    ng-repeat="th in lxDataTable.thead track by $index"
                    ng-if="!lxDataTable.thumbnail || (lxDataTable.thumbnail && $index != 0)">
                    <lx-icon lx-id="{{ th.icon }}" ng-if="th.icon"></lx-icon>
                    <span>{{ th.label }}</span>
                </th>
            </tr>
        </thead>

        <tbody>
            <tr ng-class="{ 'data-table__selectable-row': lxDataTable.selectable,
                            'data-table__selectable-row--is-disabled': lxDataTable.selectable && tr.lxDataTableDisabled,
                            'data-table__selectable-row--is-selected': lxDataTable.selectable && tr.lxDataTableSelected }"
                ng-repeat="tr in lxDataTable.tbody"
                ng-click="lxDataTable.toggle(tr)">
                <td ng-if="lxDataTable.thumbnail">
                    <div ng-if="lxDataTable.thead[0].format" ng-bind-html="lxDataTable.$sce.trustAsHtml(lxDataTable.thead[0].format(tr))"></div>
                </td>
                <td ng-if="lxDataTable.selectable"></td>
                <td ng-repeat="th in lxDataTable.thead track by $index"
                    ng-if="!lxDataTable.thumbnail || (lxDataTable.thumbnail && $index != 0)">
                    <span ng-if="!th.format">{{ tr[th.name] }}</span>
                    <div ng-if="th.format" ng-bind-html="lxDataTable.$sce.trustAsHtml(th.format(tr))"></div>
                </td>
            </tr>
        </tbody>
    </table>
</div>